<template>
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <van-empty :image-size="180" v-show="isEmpty && !myLoading" :description="noneText"></van-empty>
        <van-list offset="50" v-show="!isEmpty" :finished="finished" v-model="myLoading" @load="load" finished-text="没有更多了" :immediate-check="immediateCheck">
            <!--<assets/images>-->
            <slot></slot>
        </van-list>
    </van-pull-refresh>

</template>

<script>
  import {List, PullRefresh,Empty } from 'vant'
  export default {
    name: "m-list",
    components: {
      [List.name]: List,
      [PullRefresh.name]: PullRefresh,
      [Empty.name]: Empty
    },
    props: {
      'total':{},
      'curNum':{},
      'loading':{},
      'loadEnd':{},
      'immediateCheck':{
        default: true
      },
      'noneText': {
        default: '当前无数据，向下滑动刷新'
      }

    },
    model: {
      prop: 'loading',
      event: 'myEvent'
    },
    data(){
      return {
        finished: false,
        myLoading: false,
        refreshing: false,
        isEmpty: false,
      }
    },
    watch: {
      loading(val){
        this.myLoading = val;
        if (val)this.refreshing = true;
        if (val) this.finished = false;

      },
      myLoading(val){
        this.$emit('myEvent',val);
      },
      loadEnd(){
        if (this.refreshing){
          this.refreshing = false;
          this.isEmpty = false;
        }
        this.myLoading = false;

        let {total,curNum} = this;
        this.isEmpty = total === 0;
        this.finished = total === curNum;

      },
      immediateCheck: {
        handler(val){
          if (!val) this.isEmpty = true
        },
        immediate: true
      }
    },
    methods: {
      refresh(){
        this.finished = false;
        this.myLoading = true;
        this.load(true);
      },
      load(first){
        this.$emit('load',first);
      }
    },
  }
</script>

<style scoped lang="less">
    .van-pull-refresh{
        height: 100%;
        overflow: auto;
    }
</style>
